<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_14')}}</h2>
            <div class="personCon">
                <div class="infopanel">
                    <div class="safelist  clearfix">
                        <h2>{{$t('l.personal_222')}}</h2>
                        <p class="tiptext fl">{{$t('l.personal_223')}}</p>
                        <router-link to="/resetpsd" class="setbtn fr">{{$t('l.personal_6')}}</router-link>
                    </div>     
                    <div class="safelist  clearfix">
                        <h2>{{$t('l.add_26')}}</h2>
                        <div class="safeitem">
                            <p class="tiptext" style="padding-bottom:30px;">{{$t('l.personal_224')}}</p>
                            <div class="identway clearfix">
                                <span class="wayname">{{$t('l.personal_225')}}</span>
                                <span class="status" :class="intro.phoneEnabled==0?'':'active'">{{intro.phoneEnabled==0?$t('l.add_27'):$t('l.add_28')}}</span>
                                <p class="tiptext">{{$t('l.personal_226')}}</p>
                                <router-link :to="intro.phoneEnabled==0?'/bindphone':''" class="setbtn fr" :class="intro.phoneEnabled==0?'':'disabled'">{{intro.phoneEnabled==0?$t('l.add_29'):$t('l.add_30')}}</router-link>
                            </div>
                            <div class="identway clearfix">
                                <span class="wayname">{{$t('l.add_31')}}</span>
                                <span class="status" :class="intro.gaEnabled==0?'':'active'">{{intro.gaEnabled==0?$t('l.add_27'):$t('l.add_28')}}</span>
                                <p class="tiptext">{{$t('l.personal_227')}}</p>
                                <router-link :to="intro.gaEnabled==0?'/bindgoogle':''" class="setbtn fr" :class="intro.gaEnabled==0?'':'disabled'">{{intro.gaEnabled==0?$t('l.add_29'):$t('l.add_30')}}</router-link>
                            </div>
                            <div class="identway clearfix">
                                <span class="wayname">{{$t('l.add_32')}}</span>
                                <span class="status" :class="intro.emailEnabled==0?'':'active'">{{intro.emailEnabled==0?$t('l.add_27'):$t('l.add_28')}}</span>
                                <p class="tiptext">{{$t('l.personal_228')}}</p>
                                <router-link :to="intro.emailEnabled==0?'/bindemail':''" class="setbtn fr" :class="intro.emailEnabled==0?'':'disabled'">{{intro.emailEnabled==0?$t('l.add_29'):$t('l.add_30')}}</router-link>
                            </div>
                        </div>
                    </div>
                    <div class="safelist  clearfix">
                        <h2>{{$t('l.personal_229')}}</h2>
                        <p class="tiptext fl">{{$t('l.personal_230')}}</p>
                        <router-link to="/fishingcode" class="setbtn fr">{{intro.fishingCode?$t('l.personal_231'):$t('l.add_29')}}</router-link>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data(){
        return {
            intro:"",
        }
    },
    created(){
        this.intro = this.$store.state.userintro;
    },
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .safelist{
            padding:25px 0;
            border-bottom:1px solid rgba(233,238,244,1);
            h2{
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:22px;
                float:left;
                position:relative;
                padding-left:13px;
                padding-right :20px;
                &:after{
                    content:"";
                    position:absolute;
                    top:3px;
                    left:0;
                    width:3px;
                    height:16px;
                    background: #2D8DFE;
                }
            }
            .tiptext{
                font-size:14px;
                font-familyA:"PingFangSC-Regular";
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:22px;        
            }
            .safeitem{
                overflow:hidden;
                .identway{
                    padding:25px 0;
                    border-top:1px solid rgba(233,238,244,1);
                    .wayname{
                        float:left;
                        font-size:16px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:32px;
                    }
                    .status{
                        font-size:16px;
                        font-weight:400;
                        color:rgba(239,87,86,1);
                        line-height:32px;
                        float:left;
                        padding-left:10px;
                        padding-right:50px;
                        &.active{
                            color:#52C41A;
                        }
                    }
                    .tiptext{float:left;line-height:32px;}
                    
                }
            }
        }
    }
}
</style>



